.drawer{position: fixed; left: 0; right: 0; top: 0; bottom: 0}
.drawer-mask{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .2); animation: mask-fadein .3s cubic-bezier(0.7, 0.3, 0.1, 1)}
.drawer-pane{position: fixed; top: 0; left: 100%; height: 100%; background: #fff; box-shadow: -2px 0 8px rgba(0,0,0,0.15); transition: .3s transform}
.drawer-header{font-size: 16px; font-weight: 500; padding: 8px 24px; border-bottom: 1px solid #e8e8e8}
.drawer-header-closeable{display: flex; justify-content: space-between; align-items: center}
.drawer-body{height: 100%; max-height: 100%; overflow: auto}

.drawer-hiding .drawer-mask{animation: mask-fadeout .3s cubic-bezier(0.7, 0.3, 0.1, 1) !important}
.drawer-hiding .drawer-pane{transform: translateX(0) !important}

@keyframes mask-fadein{0%{opacity: 0;} 100%{opacity: 1;}}
@keyframes mask-fadeout{0%{opacity: 1;} 100%{opacity: 0;}}